<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }

            ul {
                width: 300px;
                height: 300px;
                margin: 20px auto;
                position: relative;
                list-style: none;
            }

            li img {
                width: 300px;
                height: 300px;
                position: absolute;
            }
            ul li:nth-of-type(1){
                width: 2px;
                height: 149px;
                position: absolute;
                left: 149px;
                background: red;
                position: absolute;
                left: 149px;
                top: 40px;
                transform-origin: 1px 110px;
                animation: move 60s linear infinite;

            }
            ul li:nth-of-type(2){
                width: 4px;
                height: 120px;
                position: absolute;
                background: dodgerblue;
                position: absolute;
                left: 148px;
                top: 60px;
                transform-origin: 2px 90px;
                animation: move 3600s linear infinite;
            }
            ul li:nth-of-type(3){
                width: 6px;
                height: 100px;
                position: absolute;
                left: 147px;
                background: palegoldenrod;
                position: absolute;
                top: 80px;
                transform-origin: 3px 70px;
                animation: move 21600s linear infinite;
                }
            @keyframes move{
                0%{}
                100%{transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
<ul>
    <img src="img/1.png" >
    <li></li>
    <li></li>
    <li></li>
</ul>
    </body>
</html>
